{% load i18n %}
{% extends "base.html" %}
{% block title %}{{title}} - {{blog.title}}{% endblock %}
{% block blogcontainer %}
<div id="jqModal" class="jqmWindow" style="display: none;"></div>
<map name="comic-map">
<area href="#" class="hotspot" title="test hotspot" shape="poly" coords="0,143, 143,135, 135,0"></area>	
</map>

<style>
#topmenu{
	display:none;
}	
#footerbar{
	display:none;
}	
#posts-secondary{
	display:none;
}	
#post-text{
	display:none;
}

div.pane{
	overflow:auto;
	clear:left;
	margin: 10px 0 0 10px;
	position:relative;
	width:826px;
	height:322px;
}	
div.fullscreen-comic{
	top:0;
	left:0;
}	
body{
	overflow:hidden;
}
#page-full{
	margin-left: auto;
	margin-right: auto;
	width:  100%;
	float: none;
	clear: both;
}
#nav_featured{
	width: 100%;
	float: left;
	clear: both;
	padding: 0px;
	margin: 0px;
}
</style>

<script type="text/javascript" src="/js/jquery.maphilight.min.js"></script>
<script type="text/javascript" src="/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="/js/jquery.jScale.js"></script>
<script type="text/javascript" src="/js/jScrollPane-1.2.3.min.js"></script>


<script type="text/javascript">

function showComic(href, as_is){
	var url = ""; 
	if (as_is == undefined || as_is == false){
		url = "/rpc/episode" + href;
	}
	else{
		url = href;		
	}
	url = String(url).replace("/type/comic","");
	if(String(url).indexOf("/rpc/") == -1){
		url = "/rpc/episode" + url;
	}
	$("#post-comic").html("<img id='post-comic-img' src='"+ url +"'>");
	$("#post-comic-img").attr("usemap", "#comic-map");	
	w = $(window).width() - 50;
	h = $("#post-comic-img").height();

	var x = $("#nav_featured").offset().left;
	var y = $("#nav_featured").offset().top;
	var h2 = $("#nav_featured").height();
	var comicY = y + h2;
	var comicHeight = $(window).height() - comicY - 2;//40;

	$("#post").width(w);
	$("#post").height(comicHeight);
	$("#post").attr("class", "pane");	
	//$("#post-comic-img").maphilight();
	//$("#post-comic-img").jScale({'w':'1000'});	
	
	if (String(href).indexOf("/rpc/") == -1) {
		var episode = String(href).replace("/type/comic","");	
		episode = String(episode).replace("/","");	
		url = "/filter/permalink/" + episode + "/type/comic/format/json/";		
		$.getJSON(url, {}, function(response){
			try{
				var result = "";
				for (var i = 0; i < response["chapterList"].length; i++) {
					result += '<option value="' + response["chapterList"][i].title + '">' + response["chapterList"][i].title + '</option>';
				}
				$("#chapterList").html(result);
				$('#chapterList option:first').attr('selected', 'selected');
				
				result = "";
				for (var i = 0; i < response["episodeList"].length; i++){
					result += '<option value="' + response["episodeList"][i].permalink + '">' + response["episodeList"][i].title + '</option>';
				}
				$("#episodeList").html(result);
				$('#episodeList option:first').attr('selected', 'selected');
			}catch(e){}

			if (response.nav_relative_url_list.blog_references.first_url){
				$('#nav-relative-first').attr("href", "/" + response.nav_relative_url_list.blog_references.first_url.permalink);
				$('#nav-relative-first').qtip("destroy");				
				$('#nav-relative-first').qtip({
			      content:  response.nav_relative_url_list.blog_references.first_url.title + '<br><img src="/rpc/episodethumb/' + response.nav_relative_url_list.blog_references.first_url.permalink + '">'
			   	});				
				$('#nav-relative-first').show();
			}else{
				$('#nav-relative-first').hide();
			}				

			if(response.nav_relative_url_list.blog_references.previous_url){	
				$('#nav-relative-previous').attr("href", "/" + response.nav_relative_url_list.blog_references.previous_url.permalink);
				$('#nav-relative-previous').qtip("destroy");				
				$('#nav-relative-previous').qtip({
			      content: response.nav_relative_url_list.blog_references.previous_url.title + '<br><img src="/rpc/episodethumb/' + response.nav_relative_url_list.blog_references.previous_url.permalink + '">'
			   	});				
				$('#nav-relative-previous').show();
			}else{
				$('#nav-relative-previous').hide();
			}				

			if(response.nav_relative_url_list.blog_references.next_url){		
				$('#nav-relative-next').attr("href", "/" + response.nav_relative_url_list.blog_references.next_url.permalink);
				$('#nav-relative-next').qtip("destroy");				
				$('#nav-relative-next').qtip({
			      content: response.nav_relative_url_list.blog_references.next_url.title + '<br><img src="/rpc/episodethumb/' + response.nav_relative_url_list.blog_references.next_url.permalink + '">'
			   	});				
				$('#nav-relative-next').show();
			}else{
				$('#nav-relative-next').hide();
			}				

			if(response.nav_relative_url_list.blog_references.latest_url){	
				$('#nav-relative-latest').attr("href", "/" + response.nav_relative_url_list.blog_references.latest_url.permalink);
				$('#nav-relative-latest').qtip("destroy");				
				$('#nav-relative-latest').qtip({
			      content: response.nav_relative_url_list.blog_references.latest_url.title + '<br><img src="/rpc/episodethumb/' + response.nav_relative_url_list.blog_references.latest_url.permalink + '">'
			   	});								
				$('#nav-relative-latest').show();
			}else{
				$('#nav-relative-latest').hide();
			}				
			
			

			$("#go-comment").click(function(){				
				var episode_value = response.current_page.permalink;
				var url = "/" + episode_value + "#comment-form";
				window.location.href = url;				
			});
			$("#go-share").click(function(){								
				var episode_title = response.current_page.title;
				var episode_url = "/" + response.current_page.title;
				var url = "http://www.addtoany.com/share_save?linkurl=" + episode_url + "&linkname={{BLOG.title}}: " + episode_title;
				window.location.href = url;
			});
						
			
			

		})
	}
	
}	
	
$(document).ready(function(){	
	$('#nav-relative-first').click(function(){				
		showComic($(this).attr("href"));
		return false;
	});	
	$('#nav-relative-previous').click(function(){				
		showComic($(this).attr("href"));
		return false;
	});			
	$('#nav-relative-next').click(function(){				
		showComic($(this).attr("href"));
		return false;
	});	
	$('#nav-relative-latest').click(function(){				
		showComic($(this).attr("href"));
		return false;
	});	
	
	var comic_src = $("#post-comic").find("img").attr("src");
	showComic(comic_src, true);

}); // end doc. ready
</script>


{% ifnotequal blog.entrytype "page" %}
	{% include "include/nav_relative.html" %}
{% endifnotequal %}	


<div id="post-single">
{% include "include/blog_post.html" %}
</div>

<div id="comments-threaded-discussion" style="display:none;">
{% if reactions %}
	{% include "include/comments_threaded_discussion.html" %}
{% endif %}
{% include "include/comment_form.html" %}
</div>		
{% endblock %}







	





